<template>
  <div class="page-container">
    <div class="container">
    <h1>员工离职申请</h1>
    <!-- 审批状态筛选 -->
    <el-row justify="start" width="20px">
      <el-select v-model="approvalStatusFilter" placeholder="筛选审批状态" @change="handleApprovalStatusChange">
        <el-option label="所有" :value="null"></el-option>
        <el-option label="待审批" :value="'待审批'"></el-option>
        <el-option label="已批准" :value="'批准'"></el-option>
        <el-option label="已拒绝" :value="'拒绝'"></el-option>
      </el-select>
    </el-row>
    <!-- 表格展示 -->
    <el-table :data="filteredRequests" border stripe style="width: 100%">
      <el-table-column prop="id" label="请求ID" width="150" align="center" />
      <el-table-column prop="employeeName" label="员工姓名" width="150" align="center"/>
      <el-table-column prop="requestReason" label="申请理由" />
      <el-table-column prop="approvalStatus" label="审批状态" width="150" align="center"/>
      <el-table-column label="操作" width="250" align="center">
        <template v-slot="scope">
          <!-- 根据审批状态动态显示按钮或“已审批” -->
          <div v-if="scope.row.approvalStatus === '待审批'">
            <el-button @click="approveRequest(scope.row, '批准')" type="success">批准</el-button>
            <el-button @click="approveRequest(scope.row, '拒绝')" type="danger" style="margin-left: 10px;">拒绝</el-button>
          </div>
          <div v-else>
            <!-- 如果审批状态为“已批准”或“已拒绝”，都显示“已审批” -->
            <span>已审批</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"

    />
  </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      requests: [],               // 存储所有请求数据
      pageNum: 1,                 // 当前页码
      pageSize: 10,                // 每页显示数量
      total: 0,                   // 总记录数
      approvalStatusFilter: null,   // 筛选条件，默认显示所有
    };
  },
  computed: {
    // 根据审批状态筛选请求
    filteredRequests() {
      if (this.approvalStatusFilter === null) {
        return this.requests; // 不筛选，返回所有请求
      }
      return this.requests.filter(request => request.approvalStatus == this.approvalStatusFilter);
    }
  },
  methods: {
    // 获取请假/加班请求
    fetchRequests(pageNum = this.pageNum, pageSize = this.pageSize) {
      axios
          .get('http://localhost:8080/admin/showRequests', {
            params: { pageNum, pageSize, approvalStatus: this.approvalStatusFilter }
          })
          .then((response) => {
            this.requests = response.data.data.records;
            this.total = response.data.data.total;
          })
          .catch((error) => {
            console.error(error);
          });
    },

    // 处理审批状态筛选变化
    handleApprovalStatusChange() {
      this.pageNum = 1; // 重置当前页码为第一页
      this.fetchRequests(); // 获取新的数据
    },

    // 审批员工请求
    approveRequest(request, status) {
      // 设置请求的审批状态
      request.approvalStatus = status;

      // 发送审批请求
      axios
          .post('http://localhost:8080/admin/approve', request)
          .then((response) => {
            if (status === '批准') {
              // 如果审批通过，则更新 employee 表的 employment_status
              this.updateEmploymentStatus(request.employeeId, '离职');
            } else {
              this.$message.success('请求已拒绝');
            }
            this.fetchRequests(this.pageNum, this.pageSize); // 刷新请求列表
          })
          .catch((error) => {
            this.$message.error(`${status === '批准' ? '批准' : '拒绝'}失败`);
          });
    },

    // 更新员工状态
    updateEmploymentStatus(employeeId, employmentStatus) {
      axios
          .post('http://localhost:8080/admin/updateEmploymentStatus', { employeeId, employmentStatus })
          .then(() => {
            this.$message.success('员工状态更新成功');
            this.fetchRequests(this.pageNum, this.pageSize); // 刷新请求列表
          })
          .catch((error) => {
            this.$message.error('员工状态更新失败');
            console.error(error);
          });
    },

    // 处理分页变化
    handlePageChange(newPageNum) {
      this.pageNum = newPageNum;
      this.fetchRequests(newPageNum, this.pageSize); // 根据当前页数获取数据
    }
  },

  mounted() {
    this.fetchRequests();  // 页面加载时获取数据
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #409eff;
}
el-table {
  margin-bottom: 20px;
  /* 设置行高 */
  --el-table-row-height: 48px; /* 这里使用了Element Plus的变量方式 */
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>